<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:replace="head :: commonHead(${title})">

    <!--/*<title cus:dict="video-type,${type}"></title>*/-->
</head>

<body>

<link rel="stylesheet" th:href="${#request.getAttribute('ctx') + '/static/front/css/index/work-resume.css'}">

<div style="height:100%" id="app">

    <div th:replace="head :: header"></div>

    <div class="banner pc">
        <div>
            <img th:src="${#request.getAttribute('ctx') + '/static/yinyuepeiyue.png'}" style="width: 100%;height: 430px;">
        </div>
    </div>

    <div class="love_container">
<!--        <div class="love_container_title clearfix">-->
<!--            <div class="love_container_title_l">-->
<!--                <em></em>-->
<!--                <h3>作品墙</h3>-->
<!--            </div>-->
<!--            <div class="love_container_title_r clearfix">-->
<!--                <input type="text" placeholder="作品名称/作品简介" v-model="searchWord"/>-->
<!--                <a href="javascript:void(0)" class="search" @click="load"></a>-->
<!--            </div>-->
<!--        </div>-->
        <div class="love_container_list">
            <ul class="clearfix">
                <li v-for="(item, index) in tableData" :key=item.id :xs="12" :sm="12" :md="8" :lg="8" :xl="8">
                    <a :href="'/production/detail/' + item.id" target="_blank">
                        <div class="top">
                            <img :src="item.spriteUrl2" class="fengmian"/>
                        </div>
                    </a>
                    <div class="center">
                        <h4>{{item.name}}</h4>
                        <p>{{item.title}}</p>
                    </div>
                    <div class="bottom clearfix">
                        <div class="left">
                            <a :href="'/order/ready/1?sameStyleId=' + item.id" target="_blank">订购同款</a>
                        </div>
                        <div class="right">
<!--                            <dl class="video">-->
<!--                                <dt><i class="iconfont icon-shipin"></i></dt>-->
<!--                                <dd>{{item.count|NumberFormat}}</dd>-->
<!--                            </dl>-->
<!--                            <dl class="icon">-->
<!--                                <dt class="operations-collect" :data-collect-id="item.id" data-collect-type="2"-->
<!--                                    data-collect-operation="2">-->
<!--                                    <i :class="item.id|Active(collections, 2, 2) ? 'iconfont icon-zanxinxingguanzhu icon-active' : 'iconfont icon-zanxinxingguanzhu'"></i>-->
<!--                                </dt>-->
<!--                                <dd :class="item.id|Active(collections, 2, 2) ? 'icon-active' : ''">-->
<!--                                    {{item.collectCount|NumberFormat}}-->
<!--                                </dd>-->
<!--                            </dl>-->
<!--                            <dl class="icon">-->
<!--                                <dt class="operations-collect" :data-collect-id="item.id" data-collect-type="2"-->
<!--                                    data-collect-operation="1">-->
<!--                                    <i :class="item.id|Active(collections, 2, 1) ? 'iconfont icon-dianzan icon-active' : 'iconfont icon-dianzan'"></i>-->
<!--                                </dt>-->
<!--                                <dd :class="item.id|Active(collections, 2, 1) ? 'icon-active' : ''">-->
<!--                                    {{item.likeCount|NumberFormat}}-->
<!--                                </dd>-->
<!--                            </dl>-->
                        </div>
                    </div>
                </li>

            </ul>

        </div>

        <div style="display: flex;justify-content: center;">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="pageSize"
                    layout="prev, pager, next"
                    :total="total"
                    v-show="tableData != null && tableData.length > 0">
            </el-pagination>
            <div v-show="tableData == null || tableData.length == 0">
                暂时没有找到作品, 敬请期待!
            </div>
        </div>

    </div>


    <div th:replace="foot :: body"></div>
</div>

</body>

<script>
    $(function () {
        $('.love_container_title_r').bind('keyup', function (event) {
            if (event.keyCode == 13) {
                v.load();
            }
        })
    })
</script>

<script th:inline="javascript">
    var data = [[${videos.list}]];
    for (var i in data) {
        data[i].spriteUrl2 = uploadServer + data[i].spriteUrl2;
    }

    var v = new Vue({
        el: '#app',
        data: {
            searchWord: '',

            visible: false,
            title: '',
            tableData: data,
            total: [[${videos.total}]],
            currentPage: [[${videos.pageNum}]],
            pageSize: [[${videos.pageSize}]],
            loading: false,

            collections: [[${collects}]]
        },

        methods: {
            load: function () {
                var _self = this;
                $.ajax({
                    type: 'get',
                    url: [[${ctx}]] + '/production/api/list',
                    data: {
                        pageNum: _self.currentPage,
                        pageSize: _self.pageSize,
                        type: [[${type}]],
                        searchWord: _self.searchWord
                    },
                    beforeSend: function () {
                        _self.loading = true;
                    },
                    dataType: 'json',
                    success: function (result) {
                        for (var i in result.data.list) {
                            result.data.list[i].spriteUrl2 = uploadServer + result.data.list[i].spriteUrl2;
                        }
                        _self.tableData = result.data.list;
                        _self.currentPage = result.data.pageNum;
                        _self.total = result.data.total;
                        _self.loading = false;

                        bindCollectEvent();
                    },
                    error: function (e) {
                        ELEMENT.Message.error();
                    }
                })
                $('html,body').animate({scrollTop: $($('h3')[1]).offset().top});
            },

            handleSizeChange: function(val) {
                this.pageSize = val;
                this.load();
            },

            handleCurrentChange: function(val) {
                this.currentPage = val;
                this.load();
            },

        }
    })
</script>
</html>